<template>
    <div class="footer">
      <router-link to="/">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-shouye"></use>
        </svg>
        首页</router-link>
      <router-link to="/class">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-fenlei"></use>
        </svg>
        分类</router-link>
      <router-link to="/hredline">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-iconfangshitoutiao"></use>
        </svg>
        头条</router-link>
      <router-link to="/shop">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-gouwuche"></use>
        </svg>
        购物车</router-link>
      <router-link to="/my">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-wode"></use>
        </svg>
        我的</router-link>
    </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.footer{

  display: flex;
}
.footer a{
  color: #454545;
  font-size: .4rem;
    flex: 1;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  }
  .icon {
    color: #454545;
    width: .8rem;
    height: .8rem;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
    margin-bottom: 5px;
  }

.router-link-exact-active.router-link-active{
  background: white;
color: #2DA2FF;
}
.router-link-exact-active.router-link-active .icon{
  color: #2DA2FF;
}
</style>
